<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* *{padding:0;margin: 0;}
        h1{
            height: 40px;

        }
        ul{font-size: 17px;font-weight: 700;line-height: 0;display: block;}
        li{font-weight: 400;display: block; overflow: hidden;list-style: none;}
        .box1 {
            margin-bottom: 10px;
        } */
        *{margin: 0; padding: 0; list-style: none;}
    .box{display: flex; align-items: center;   flex-direction: column; margin-top: 30px;}
    .box h1{font-size: 18px; line-height: 18px;}
    .box ul{line-height: 0;}
    .box li{margin-left: 20px; overflow: hidden;}
    .box1{margin-bottom: 10px;}
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <ul>
                <h1>我的朋友</h1>
                <li>马化腾</li>
                <li>马化腾</li>
                <li>马化腾</li>
                <li>马化腾</li>
                <li>马化腾</li>
            </ul>
        </div>
        <div class="box1">
            <ul>
                <h1>我的同学</h1>
                <li>马化腾</li>
                <li>马化腾</li>
                <li>马化腾</li>
                <li>马化腾</li>
                <li>马化腾</li>
            </ul>
        </div>
        <div class="box1">
            <ul>
                <h1>我的伙伴</h1>
                <li>马化腾</li>
                <li>马化腾</li>
                <li>马化腾</li>
                <li>马化腾</li>
                <li>马化腾</li>
            </ul>
        </div>
    </div>
    <script>
      var our = document.getElementsByTagName('ul')
      for(var i = 0;i<our.length;i++) {
        our[i].title="true";
        our[i].onclick = function(){
            if(this.title == 'true') {
                this.style.lineHeight = '40px'
                this.title = "false"
            }else {
                this.style.lineHeight = "0px"
                this.title = "true"
            }
        }
      }
    </script>
</body>
</html>